<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleDownload"
          class="custom-download-btn"
        >
          下载
        </el-button>
      </el-col>
      <el-col :span="3">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入搜索关键词"
          clearable
          class="custom-input"
        />
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          class="custom-search-btn"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          class="custom-add-btn"
        >
          新增
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="gddianlanList"
      class="custom-table"
      border
      resizable
    >
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :label="column.label"
        :prop="column.prop"
        :formatter="column.formatter"
        :width="column.width"
      />
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            class="custom-edit-btn"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            class="custom-delete-btn"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="custom-pagination"
    />

    <el-dialog
      :title="isEdit ? '编辑供电电缆记录' : '新增供电电缆记录'"
      :visible.sync="dialogVisible"
      width="50%"
      class="custom-dialog"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="编号" prop="dlid" v-if="isEdit">
          <el-input v-model.number="form.dlid" disabled class="custom-input" />
        </el-form-item>
        <el-form-item label="设备 ID 编号" prop="eq_id">
          <el-input v-model.number="form.eq_id" class="custom-input" />
        </el-form-item>
        <el-form-item label="站区 ID 编号" prop="zq_id">
          <el-input v-model.number="form.zq_id" class="custom-input" />
        </el-form-item>
        <el-form-item label="冗余字段" prop="ganhaos">
          <el-input v-model="form.ganhaos" class="custom-input" />
        </el-form-item>
        <el-form-item label="支持绝缘状态" prop="zdt_jyzt">
          <el-input v-model="form.zdtjyzt" class="custom-input" />
        </el-form-item>
        <el-form-item label="连接状态" prop="zdt_ljzt">
          <el-input v-model="form.zdtljzt" class="custom-input" />
        </el-form-item>
        <el-form-item label="外观状态" prop="zdt_wgzt">
          <el-input v-model="form.zdtwgzt" class="custom-input" />
        </el-form-item>
        <el-form-item label="抱箍状态" prop="zdt_bkzt">
          <el-input v-model="form.zdtbkzt" class="custom-input" />
        </el-form-item>
        <el-form-item label="电缆中间头状态" prop="zjt">
          <el-input v-model="form.zjt" class="custom-input" />
        </el-form-item>
        <el-form-item label="接地线状态" prop="jdx">
          <el-input v-model="form.jdx" class="custom-input" />
        </el-form-item>
        <el-form-item label="护层保护器状态" prop="hcbhq">
          <el-input v-model="form.hcbhq" class="custom-input" />
        </el-form-item>
        <el-form-item label="外绝缘状态" prop="wjy">
          <el-input v-model="form.wjy" class="custom-input" />
        </el-form-item>
        <el-form-item label="支架悬挂状态" prop="zjxg">
          <el-input v-model="form.zjxg" class="custom-input" />
        </el-form-item>
        <el-form-item label="检查日期" prop="mkdate">
          <el-date-picker
            v-model="form.mkdate"
            type="date"
            placeholder="选择检查日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM--------dd"
            class="custom-datepicker"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="form.leader" class="custom-input" />
        </el-form-item>
        <el-form-item label="操作人" prop="oprator">
          <el-input v-model="form.oprator" class="custom-input" />
        </el-form-item>
        <el-form-item label="是否最新" prop="islast">
          <el-select v-model="form.islast" class="custom-select">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" class="custom-input" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="custom-cancel-btn">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm" class="custom-confirm-btn">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {
  selectAll,
  deleteGddianlan,
  downloadGddianlan,
  addGddianlan,
  updateGddianlan,
} from "@/api/MaintenanceRecord/gddianlan";
import dayjs from "dayjs";

export default {
  name: "GddianlanList",
  data() {
    return {
      loading: true,
      gddianlanList: [],
      allList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: "",
      tableColumns: [
  { label: "编号", prop: "dlid", width: "80" },
  { label: "设备名称", prop: "equipname", width: "120" },
  { label: "站区名称", prop: "zqname", width: "120" },
  { label: "工区名称", prop: "gongquName", width: "120" },
  { label: "冗余字段", prop: "ganhaos", width: "150" },
  { label: "支持绝缘状态", prop: "zdtjyzt", width: "120" },
  { label: "连接状态", prop: "zdtljzt", width: "120" },
  { label: "外观状态", prop: "zdtwgzt", width: "120" },
  { label: "抱箍状态", prop: "zdtbkzt", width: "120" },
  { label: "电缆中间头状态", prop: "zjt", width: "150" },
  { label: "接地线状态", prop: "jdx", width: "120" },
  { label: "护层保护器状态", prop: "hcbhq", width: "150" },
  { label: "外绝缘状态", prop: "wjy", width: "120" },
  { label: "支架悬挂状态", prop: "zjxg", width: "120" },
  { label: "检查日期", prop: "mkdate", formatter: this.formatDate, width: "150" },
  { label: "负责人", prop: "leader", width: "120" },
  { label: "操作人", prop: "oprator", width: "120" },
  { label: "是否最新", prop: "islast", width: "100" },
  { label: "备注", prop: "remark", width: "200" }
],
      dialogVisible: false,
      isEdit: false,
      form: {
        dlid: null,
        eq_id: null,
        zq_id: null,
        ganhaos: "",
        zdtjyzt: "",
        zdtljzt: "",
        zdtwgzt: "",
        zdtbkzt: "",
        zjt: "",
        jdx: "",
        hcbhq: "",
        wjy: "",
        zjxg: "",
        mkdate: "",
        leader: "",
        oprator: "",
        islast: null,
        remark: "",
      },
      rules: {
        eq_id: [
          { required: true, message: "请输入设备 ID 编号", trigger: "blur" },
        ],
        zq_id: [
          { required: true, message: "请输入站区 ID 编号", trigger: "blur" },
        ],
        ganhaos: [
          { required: true, message: "请输入冗余字段", trigger: "blur" },
        ],
        zdt_jyzt: [
          { required: true, message: "请输入支持绝缘状态", trigger: "blur" },
        ],
        zdt_ljzt: [
          { required: true, message: "请输入连接状态", trigger: "blur" },
        ],
        zdt_wgzt: [
          { required: true, message: "请输入外观状态", trigger: "blur" },
        ],
        zdt_bkzt: [
          { required: true, message: "请输入抱箍状态", trigger: "blur" },
        ],
        zjt: [
          { required: true, message: "请输入电缆中间头状态", trigger: "blur" },
        ],
        jdx: [
          { required: true, message: "请输入接地线状态", trigger: "blur" },
        ],
        hcbhq: [
          { required: true, message: "请输入护层保护器状态", trigger: "blur" },
        ],
        wjy: [
          { required: true, message: "请输入外绝缘状态", trigger: "blur" },
        ],
        zjxg: [
          { required: true, message: "请输入支架悬挂状态", trigger: "blur" },
        ],
        mkdate: [
          { required: true, message: "请选择检查日期", trigger: "blur" },
        ],
        leader: [
          { required: true, message: "请输入负责人", trigger: "blur" },
        ],
        oprator: [
          { required: true, message: "请输入操作人", trigger: "blur" },
        ],
        islast: [
          { required: true, message: "请选择是否最新", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    filteredList() {
      if (!this.searchKeyword) return this.allList;
      const keyword = this.searchKeyword.toLowerCase();
      return this.allList.filter((item) =>
        Object.values(item).some((value) =>
          String(value).toLowerCase().includes(keyword)
        )
      );
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      selectAll()
        .then((response) => {
          this.allList = response.data;
          this.total = this.allList.length;
          this.currentPage = 1;
          this.updateGddianlanList();
          this.loading = false;
        })
        .catch((error) => {
          console.error("接口请求出错:", error);
          this.loading = false;
        });
    },
    updateGddianlanList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.gddianlanList = this.filteredList.slice(start, end);
    },
    handleDelete(row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteGddianlan(row.dlid)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.fetchData();
            })
            .catch((error) => {
              console.error("删除失败:", error);
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateGddianlanList();
    },
    handleDownload() {
      downloadGddianlan()
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "供电电缆记录数据.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error("下载失败:", error);
        });
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    formatDate(row, column, cellValue, index) {
      return dayjs(cellValue).format("YYYY-MM-DD");
    },
    handleEdit(row) {
      this.isEdit = true;
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleAdd() {
      this.isEdit = false;
      this.form = {
        dlid: null,
        eq_id: null,
        zq_id: null,
        ganhaos: "",
        zdt_jyzt: "",
        zdt_ljzt: "",
        zdt_wgzt: "",
        zdt_bkzt: "",
        zjt: "",
        jdx: "",
        hcbhq: "",
        wjy: "",
        zjxg: "",
        mkdate: "",
        leader: "",
        oprator: "",
        islast: null,
        remark: "",
      };
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateGddianlan(this.form.dlid, this.form)
              .then(() => {
                this.$message.success("编辑成功");
                this.fetchData();
                this.dialogVisible = false;
              })
              .catch((error) => {
                console.error("编辑失败:", error);
                this.$message.error("编辑失败");
              });
          } else {
            addGddianlan(this.form)
              .then(() => {
                this.$message.success("新增成功");
                this.fetchData();
                this.dialogVisible = false;
              })
              .catch((error) => {
                console.error("新增失败:", error);
                this.$message.error("新增失败");
              });
          }
        } else {
          this.$message.warning("请填写所有必填字段");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.custom-table {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }
.custom-table.el-table__header th {
    background-color: #f5f7fa;
    color: #303133;
    font-weight: bold;
  }
.custom-table.el-table__body tr {
    height: 40px;
  }
.custom-table.el-table__body td {
    color: #606266;
  }
.custom-download-btn {
    background-color: #67c23a;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
.custom-download-btn:hover {
    background-color: #85ce61;
  }
.custom-search-btn,.custom-add-btn {
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
.custom-search-btn:hover,.custom-add-btn:hover {
    background-color: #66b1ff;
  }
.custom-input {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
  }
.custom-input:hover,.custom-input:focus {
    border-color: #409EFF;
  }
.custom-edit-btn,.custom-delete-btn {
    color: #409EFF;
  }
.custom-edit-btn:hover,.custom-delete-btn:hover {
    color: #66b1ff;
  }
.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
.custom-pagination.el-pagination button,.custom-pagination.el-pagination span {
    font-size: 14px;
    color: #606266;
  }
.custom-pagination.el-pagination.el-pager li {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 5px;
  }
.custom-pagination.el-pagination.el-pager li:hover {
    color: #409EFF;
    border-color: #409EFF;
  }
.custom-dialog {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
.custom-datepicker {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
  }
.custom-datepicker:hover,.custom-datepicker:focus {
    border-color: #409EFF;
  }
.custom-select {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
  }
.custom-select:hover,.custom-select:focus {
    border-color: #409EFF;
  }
.custom-cancel-btn {
    background-color: #e4e7ed;
    color: #606266;
    border: none;
    border-radius: 4px;
  }
.custom-cancel-btn:hover {
    background-color: #d1dbe5;
  }
.custom-confirm-btn {
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
.custom-confirm-btn:hover {
    background-color: #66b1ff;
  }
</style>